import React, { Component } from 'react';
import { StyleSheet, Text, View, Dimensions, ScrollView, TouchableOpacity, Image, ActivityIndicator } from "react-native";
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common.js';
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import navigationSeevice from '../../../components/navigation/navigationSeevice';
import ModalPicDelComponent from '../../../component/ModalPicDelComponent';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';

const ScreenWidth = Dimensions.get('window').width;
const scale = ScreenWidth / 375;
const modalPicDelCfg = {
	visible: false,
	uri: null,
	delPress: () => { },
	picPress: () => { },
	fileId: '',
	delTextHide: true
}
export class Attachment extends Component {
	static navigationOptions = ({ navigation }) => {
		return {
			headerTitle: '附件',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color="#fff" />,
			headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../imgs/goBackEmpty.png')} />),
			headerStyle: style.head.headerStyle,
			headerTitleStyle: style.head.headerTitleStyle
		}
	};

	constructor(props) {
		super(props);
		this.state = {
			uriList: [],
			status: 'loading'
		}
		modalPicDelCfg.picPress = () => {
			modalPicDelCfg.visible = false;
			modalPicDelCfg.uri = null;
			this.setState({
				previewModalVisible: false,
			});
		}
	}

	componentWillMount() {
		this.getImgView()
	}

	async getImgView() {
		this.setState({ status: 'loading' })
		const { qualificationAddress } = this.props.navigation.state.params;
		console.log(qualificationAddress)
		qualificationAddress.map(async (fileId) => {
			await this.loadedImgs(fileId, qualificationAddress.length);
		})
	}

	async loadedImgs(fileId, length) {
		const { uriList } = this.state;
		const response = await HTTP.GET(API_GENERATE(API.GET_IMG_VIEW), { fileId });
		if (response) {
			const { attachmentFileVO } = response;
			uriList.push({
				uri: response.image || '',
				type: attachmentFileVO.fileExtName.toUpperCase() || 'PNG',
				fileId,
				fileName: attachmentFileVO.fileName
			});
			if (uriList.length == length) {
				this.setState({
					status: 'data',
				});
			}
		} else {
			this.setState({ status: 'loading' })
		}
	}

	enlarge(val) {
		modalPicDelCfg.visible = true;
		modalPicDelCfg.uri = val;
		this.setState({
			ls: true
		})
	}
	render() {
		let { uriList, status } = this.state;
		return (
			<ScrollView style={{ flex: 1, backgroundColor: '#fff' }}>
				{status == 'data' ?
					<View style={{ marginLeft: 10 * scale, marginTop: 20 * scale }}>
						{uriList.length ? uriList.map((item, i) => {
							const { uri, fileId, type, fileName } = item;
							return (
								<TouchableOpacity key={i} style={{ marginTop: 10 * scale }}
									onPress={() => {
										if (type == 'PDF') {
											navigationSeevice.navigate('ContractPdfPage', {
												finalFileId: fileId,
												title: '附件信息'
											})
										} else {
											this.enlarge(uri)
										}

									}} activeOpacity={0.5}>
									<Text style={{ color: style.color.themeColor, fontSize: 18 * scale }}>【{fileName || '附件' + { i }}】</Text>
								</TouchableOpacity>
							)
						}) : null}
					</View>
					: <View style={{ marginTop: '40%' }}><PageStatusIndex status={status} onErrorPress={this.getImgView} /></View>}
				<ModalPicDelComponent {...modalPicDelCfg} />
			</ScrollView>
		)
	}
}

const styles = StyleSheet.create({
})